<template>
  <el-input v-model="keyword" prefix-icon="el-icon-search" :placeholder="placeholder" clearable :style="{width:width}" class="search" />
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入关键字搜素'
    },
    width: {
      type: String,
      default: '260px'
    }

  },
  data() {
    return {
      keyword: ''
    }
  },
  watch: {
    value: function(val) {
      this.keyword = val
    },
    keyword: function(val) {
      this.doSearch()
    }
  },
  created() {
    document.onkeydown = (e) => {
      const key = window.event.keyCode
      if (key === 13) {
        this.doSearch()
      }
    }
  },
  methods: {
    doSearch() {
      this.$emit('input', this.keyword)
      this.$emit('search')
    }
  }
}
</script>
<style   lang="scss">
  .search{
    .el-input-group__append{
      padding: 0  10px 0 0;
    }
  }
</style>
